<template>
  <!-- 页面主容器 -->
  <div class="product-page-container">

  <!-- 搜索框与添加商品按钮 -->
  <div class="search-box">
    <a-form :model="searchForm" layout="inline" class="search-form">
      <a-form-item class="search-input-item">
        <a-input v-model="searchForm.keyword" placeholder="请输入商品名称或编码" class="search-input" />
      </a-form-item>
      <a-form-item class="search-button-item">
        <a-button type="primary" @click="handleSearch" class="search-button">
          <template #icon>
            <IconSearch />
          </template>
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <div class="add-product-container">
      <a-button type="primary" status="success" @click="handleAddProduct" class="add-product-button">
        <template #icon>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
          </svg>
        </template>
        添加商品
      </a-button>
    </div>
  </div>

  <!-- 商品列表表格 -->
  <div class="product-table-container">
    <div v-if="!loading && productList.length === 0" style="text-align: center; padding: 20px; color: #999;">
      <div>暂无商品数据</div>
    </div>
    <a-table :columns="columns" :data="productList" :loading="loading" :pagination="false" class="product-table">
      <template #mainImage="{ record }">
        <img v-if="record.mainImage" :src="record.mainImage" alt="商品主图"
          style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;" />
        <span v-else>暂无图片</span>
      </template>
      <template #status="{ record }">
        <span :class="getStatusClass(record.status)">
          {{ getStatusText(record.status) }}
        </span>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="primary" size="mini" @click="handleView(record)" :style="{
            borderRadius: '20px',
            fontWeight: '500',
            transition: 'all 0.3s ease'
          }">
            查看
          </a-button>
          <a-button :type="'primary'" :status="record.status === 0 ? 'warning' : 'success'" size="mini"
            @click="handleUpDown(record)" :style="{
              borderRadius: '20px',
              fontWeight: '500',
              minWidth: '70px',
              transition: 'all 0.3s ease',
              borderWidth: '2px'
            }">
            <template #icon v-if="record.status === 0">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
              </svg>
            </template>
            <template #icon v-else>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
              </svg>
            </template>
            {{ record.status === 0 ? '下架' : '上架' }}
          </a-button>
          <a-button type="primary" size="mini" @click="handleEdit(record)" :style="{
            borderRadius: '20px',
            fontWeight: '500',
            transition: 'all 0.3s ease',
            backgroundColor: '#52c41a',
            borderColor: '#52c41a'
          }">
            编辑
          </a-button>
          <a-button status="danger" size="mini" @click="handleDelete(record)">
            删除
          </a-button>
        </a-space>
      </template>
    </a-table>
  </div>

  <!-- 分页组件 -->
  <div class="pagination-container">
    <a-pagination v-model:current="currentPage" v-model:page-size="pageSize" :total="total" @change="handlePageChange"
      :page-size-options="[10, 20, 50, 100]" show-size-changer show-quick-jumper show-total :simple="false" />
  </div>

  <!-- 商品详情对话框 -->
  <a-modal v-model:visible="viewModalVisible" title="商品详情" width="600px" @ok="viewModalVisible = false"
    @cancel="viewModalVisible = false">
    <div v-if="currentView" class="product-detail">
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="商品ID">{{ currentView.id }}</a-descriptions-item>
        <a-descriptions-item label="商品编码">{{ currentView.productCode }}</a-descriptions-item>
        <a-descriptions-item label="商品名称">{{ currentView.title }}</a-descriptions-item>
        <a-descriptions-item label="商品状态">
          <span :class="getStatusClass(currentView.status)">
            {{ getStatusText(currentView.status) }}
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="商品描述" :span="2">
          {{ currentView.description || '暂无描述' }}
        </a-descriptions-item>
        <a-descriptions-item label="店铺ID">{{ currentView.shopId }}</a-descriptions-item>
        <a-descriptions-item label="商品库存">{{ currentView.stock || 0 }}</a-descriptions-item>
        <a-descriptions-item label="商品原价">¥{{ currentView.originalPrice || 0 }}</a-descriptions-item>
        <a-descriptions-item label="商品销售价">¥{{ currentView.salesPrice || 0 }}</a-descriptions-item>
        <a-descriptions-item label="商品点赞数">{{ currentView.likes || 0 }}</a-descriptions-item>
        <a-descriptions-item label="商品销售量">{{ currentView.saleCount || 0 }}</a-descriptions-item>
        <a-descriptions-item label="商品标签" :span="2">
          <a-space wrap>
            <a-tag v-for="tag in (currentView.tags || [])" :key="tag" color="blue">{{ tag }}</a-tag>
            <span v-if="!currentView.tags || currentView.tags.length === 0">暂无标签</span>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="商品主图" :span="2">
          <img v-if="currentView.mainImage" :src="currentView.mainImage" alt="商品主图"
            style="width: 100px; height: 100px; object-fit: cover; border-radius: 4px;" />
          <span v-else>暂无图片</span>
        </a-descriptions-item>
        <a-descriptions-item label="发货地址">{{ currentView.shipAddress || '暂无地址' }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ currentView.createTime || '暂无数据' }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ currentView.updateTime || '暂无数据' }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <template #footer>
      <a-button @click="viewModalVisible = false">关闭</a-button>
    </template>
  </a-modal>

  <!-- 商品编辑对话框 -->
  <a-modal v-model:visible="editModalVisible" title="编辑商品" width="600px" @ok="handleSaveEdit"
    @cancel="editModalVisible = false">
    <div v-if="currentEdit" class="product-edit">
      <a-form :model="currentEdit" layout="vertical">
        <a-form-item label="商品名称">
          <a-input v-model="currentEdit.title" placeholder="请输入商品名称" />
        </a-form-item>
        <a-form-item label="商品描述">
          <a-input v-model="currentEdit.description" placeholder="请输入商品描述" type="textarea" :rows="3" />
        </a-form-item>
        <a-form-item label="商品原价">
          <a-input v-model="currentEdit.originalPrice" placeholder="请输入商品原价" type="number" />
        </a-form-item>
        <a-form-item label="商品销售价（特价）">
          <a-input v-model="currentEdit.salesPrice" placeholder="请输入商品销售价" type="number" />
        </a-form-item>
        <a-form-item label="商品库存">
          <a-input v-model="currentEdit.stock" placeholder="请输入商品库存" type="number" />
        </a-form-item>
        <a-form-item label="商品发货地址">
          <a-input v-model="currentEdit.shipAddress" placeholder="请输入商品发货地址" />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-button @click="editModalVisible = false">取消</a-button>
      <a-button type="primary" @click="handleSaveEdit">保存</a-button>
    </template>
  </a-modal>

  <!-- 添加商品对话框 -->
  <a-modal v-model:visible="addModalVisible" title="添加商品" width="600px" @ok="handleSaveAdd"
    @cancel="addModalVisible = false">
    <div class="product-add">
      <a-form :model="addProductForm" layout="vertical">
        <a-form-item label="商品名称" required>
          <a-input v-model="addProductForm.title" placeholder="请输入商品名称" />
        </a-form-item>
        <a-form-item label="商品描述">
          <a-input v-model="addProductForm.description" placeholder="请输入商品描述" type="textarea" :rows="3" />
        </a-form-item>
        <a-form-item label="商品原价" required>
          <a-input v-model="addProductForm.originalPrice" placeholder="请输入商品原价" type="number" />
        </a-form-item>
        <a-form-item label="商品库存" required>
          <a-input v-model="addProductForm.stock" placeholder="请输入商品库存数量" type="number" />
        </a-form-item>
        <a-form-item label="商品标签" required>
          <a-input v-model="addProductForm.tags" placeholder="请输入商品标签，用逗号分隔" />
        </a-form-item>
        <a-form-item label="商品发货地址" required>
          <a-input v-model="addProductForm.shipAddress" placeholder="请输入商品发货地址" />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-button @click="addModalVisible = false">取消</a-button>
      <a-button type="primary" @click="handleSaveAdd">保存</a-button>
    </template>
  </a-modal>

  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { Table as aTable, Space as aSpace, Button as aButton, Pagination as aPagination, Form as aForm, FormItem as aFormItem, Input as aInput, Modal as aModal, Descriptions as aDescriptions, DescriptionsItem as aDescriptionsItem, Tag as aTag, Message } from '@arco-design/web-vue'
import { IconSearch } from '@arco-design/web-vue/es/icon'
import { productAPI } from '@/api/product/product.js'

// 组件内部响应式数据管理
const productList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10) // 每页显示数量
const loading = ref(false)
const viewModalVisible = ref(false)
const currentView = ref(null)
const editModalVisible = ref(false)
const currentEdit = ref(null)

// 搜索表单数据
const searchForm = reactive({
  keyword: ''
})

// 添加商品表单数据
const addModalVisible = ref(false)
const addProductForm = reactive({
  title: '',
  description: '',
  originalPrice: '',
  stock: '',
  tags: '',
  shipAddress: ''
})

// 表格列配置
const columns = [
  {
    title: '商品编码',
    dataIndex: 'productCode',
    key: 'productCode',
    width: 250
  },
  {
    title: '商品标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis: true
  },
  {
    title: '主图',
    dataIndex: 'mainImage',
    key: 'mainImage',
    width: 180,
    slotName: 'mainImage'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 120,
    slotName: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 280,
    fixed: 'right',
    slotName: 'action'
  }
]

const loadProductData = async (page = 1, size = 10, keyword = '') => {
  loading.value = true
  // 获取店铺ID
  const shopId = localStorage.getItem('shopId')
  try {

    // 调用API获取商品列表
    const response = await productAPI.getProductList(
      shopId,
      page,
      size,
      keyword
    )
    // 创建变量接住response.data
    const productData = response.data
    console.log('分页数据:', productData)

    // 将数据存储到组件内部
    if (productData) {
      productList.value = productData.list || productData.records || []
      total.value = productData.total || productData.totalCount || 0
      currentPage.value = productData.pageNum || productData.currentPage || page
      pageSize.value = productData.pageSize || productData.size || size

    }
  } catch (error) {
    console.error('错误详情:', error.response || error.message)
    // 处理错误，例如显示错误提示
  } finally {
    loading.value = false
  }
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '已下架',
    0: '已上架'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类
const getStatusClass = (status) => {
  return status === 0 ? 'status-online' : 'status-offline'
}

// 上架/下架操作
const handleUpDown = async (record) => {
  const operation = record.status === 0 ? '下架' : '上架'
  console.log(`${operation}商品:`, record)
  try {
    // 调用API更新商品状态
    const newStatus = record.status === 1 ? 0 : 1
    const response = await productAPI.updateStatus(record.id, { status: newStatus })

    console.log('API响应:', response)

    // 根据返回结果更新状态
    if (response && response.code === 200) {
      // API调用成功，更新本地状态
      const updatedList = productList.value.map(item =>
        item.id === record.id ? { ...item, status: newStatus } : item
      )
      productList.value = updatedList
      console.log(`商品${operation}成功`)
    } else {
      // API返回错误
      console.error(`商品${operation}失败:`, response?.message || '未知错误')
    }
  } catch (error) {
    console.error(`商品${operation}失败:`, error)
  }
}

// 查看商品
const handleView = (record) => {
  console.log('查看商品:', record)
  // 根据当前行的id在productList中查询对应的数据
  const fullProductData = productList.value.find(item => item.id === record.id)

  if (fullProductData) {
    currentView.value = fullProductData
    viewModalVisible.value = true
    console.log('当前查看的商品数据:', currentView.value)
  } else {
    console.error('未找到对应的商品数据')
  }
}

// 编辑商品
const handleEdit = (record) => {
  console.log('编辑商品:', record)
  // 根据当前行的id在productList中查询对应的数据
  const fullProductData = productList.value.find(item => item.id === record.id)

  if (fullProductData) {
    currentEdit.value = { ...fullProductData } // 创建副本避免直接修改原数据
    editModalVisible.value = true
    console.log('当前编辑的商品数据:', currentEdit.value)
  } else {
    console.error('未找到对应的商品数据')
  }
}

// 保存编辑
const handleSaveEdit = async () => {
  if (!currentEdit.value) return

  console.log('保存编辑:', currentEdit.value)

  try {
    // 获取原始数据用于比较
      const originalData = productList.value.find(item => item.id === currentEdit.value.id)
      if (!originalData) {
        console.error('未找到原始数据')
        Message.error('未找到原始商品数据')
        return
      }

    // 存储所有API调用promise
    const updatePromises = []

    // 比较各个字段是否有变更，如果有变更则调用对应API

    // 1. 商品名称变更
    if (currentEdit.value.title !== originalData.title) {
      console.log('商品名称有变更:', originalData.title, '->', currentEdit.value.title)
      updatePromises.push(productAPI.updateBasicInfo(currentEdit.value.id, { title: currentEdit.value.title }))
    }

    // 2. 商品描述变更
    if (currentEdit.value.description !== originalData.description) {
      console.log('商品描述有变更:', originalData.description, '->', currentEdit.value.description)
      updatePromises.push(productAPI.updateBasicInfo(currentEdit.value.id, { description: currentEdit.value.description }))
    }

    // 3. 商品主图变更
    if (currentEdit.value.mainImage !== originalData.mainImage) {
      console.log('商品主图有变更:', originalData.mainImage, '->', currentEdit.value.mainImage)
      updatePromises.push(productAPI.updateBasicInfo(currentEdit.value.id, { mainImage: currentEdit.value.mainImage }))
    }

    // 4. 商品原价变更
    if (currentEdit.value.originalPrice !== originalData.originalPrice) {
      console.log('商品原价有变更:', originalData.originalPrice, '->', currentEdit.value.originalPrice)
      updatePromises.push(productAPI.updateOriginalPrice(currentEdit.value.id, { originalPrice: currentEdit.value.originalPrice }))
    }

    // 5. 商品销售价变更
    if (currentEdit.value.salesPrice !== originalData.salesPrice) {
      console.log('商品销售价有变更:', originalData.salesPrice, '->', currentEdit.value.salesPrice)
      updatePromises.push(productAPI.updateSalesPrice(currentEdit.value.id, { salesPrice: currentEdit.value.salesPrice }))
    }

    // 6. 商品库存变更
    if (currentEdit.value.stock !== originalData.stock) {
      console.log('商品库存有变更:', originalData.stock, '->', currentEdit.value.stock)
      updatePromises.push(productAPI.updateStock(currentEdit.value.id, { stock: currentEdit.value.stock }))
    }

    // 7. 商品发货地址变更
    if (currentEdit.value.shipAddress !== originalData.shipAddress) {
      console.log('商品发货地址有变更:', originalData.shipAddress, '->', currentEdit.value.shipAddress)
      updatePromises.push(productAPI.updateBasicInfo(currentEdit.value.id, { shipAddress: currentEdit.value.shipAddress }))
    }

    // 如果有变更，执行所有API调用
    if (updatePromises.length > 0) {
      console.log(`共有 ${updatePromises.length} 个字段需要更新`)
      const responses = await Promise.all(updatePromises)

      // 检查所有响应是否成功
      const allSuccess = responses.every(response => response && response.code === 200)

      if (allSuccess) {
        console.log('所有字段更新成功')
        Message.success('商品信息更新成功！')
        // 更新本地数据
        const updatedList = productList.value.map(item =>
          item.id === currentEdit.value.id ? { ...currentEdit.value } : item
        )
        productList.value = updatedList
        // 关闭对话框
        editModalVisible.value = false
      } else {
        console.error('部分字段更新失败:', responses)
        Message.error('商品信息更新失败，请稍后重试！')
      }
    } else {
      console.log('没有字段需要更新')
      Message.info('没有需要更新的字段')
      // 关闭对话框
      editModalVisible.value = false
    }

  } catch (error) {
    console.error('商品编辑保存失败:', error)
    Message.error('商品信息更新失败：' + (error.message || '网络错误，请稍后重试！'))
    // 关闭对话框
    editModalVisible.value = false
  }
}

// 删除商品
const handleDelete = async (record) => {
  console.log('删除商品:', record)
  // 实际项目中应该先弹出确认对话框
  // const confirmResult = await Modal.confirm({
  //   title: '确认删除',
  //   content: `确定要删除商品「${record.title}」吗？`
  // })

  // if (confirmResult) {
  try {
    // 实际项目中应该调用API删除
    // const response = await productAPI.deleteProduct(record.id)

    // 模拟删除操作
    const updatedList = productList.value.filter(item => item.id !== record.id)
    productList.value = updatedList
    total.value -= 1
    console.log('商品删除成功')
  } catch (error) {
    console.error('商品删除失败:', error)
  }
  // }
}

// 处理分页变化
const handlePageChange = async (page, size) => {
  currentPage.value = page
  pageSize.value = size

  await loadProductData(page, size, searchForm.keyword)
}

// 搜索处理函数
const handleSearch = async () => {
  console.log('搜索关键词:', searchForm.keyword)
  await loadProductData(1, 10, searchForm.keyword)
}

// 添加商品处理函数
const handleAddProduct = () => {
  console.log('添加商品按钮被点击')
  console.log('当前addModalVisible值:', addModalVisible.value)
  // 重置表单数据
  addProductForm.title = ''
  addProductForm.description = ''
  addProductForm.mainImage = ''
  addProductForm.originalPrice = ''
  addProductForm.stock = ''
  addProductForm.tags = ''
  addProductForm.shipAddress = ''
  // 显示添加商品对话框
  addModalVisible.value = true
  console.log('设置addModalVisible为true后的值:', addModalVisible.value)
}

// 保存添加商品
const handleSaveAdd = async () => {
  console.log('保存添加商品:', addProductForm)
  
  // 表单验证
  if (!addProductForm.title) {
    Message.error('请输入商品名称')
    return
  }
  if (!addProductForm.originalPrice) {
    Message.error('请输入商品原价')
    return
  }
  if (!addProductForm.stock) {
    Message.error('请输入商品库存')
    return
  }
  if (!addProductForm.tags) {
    Message.error('请输入商品标签')
    return
  }
  if (!addProductForm.shipAddress) {
    Message.error('请输入商品发货地址')
    return
  }
  
  try {
    // 获取店铺ID
    const shopId = localStorage.getItem('shopId')
    console.log('获取到的店铺ID:', shopId)
    if (!shopId) {
      Message.error('请先登录并选择店铺')
      return
    }
    
    // 构建请求数据
    const productData = {
      title: addProductForm.title,
      description: addProductForm.description,
      shopId: shopId,
      mainImage: addProductForm.mainImage,
      originalPrice: parseFloat(addProductForm.originalPrice),
      stock: parseInt(addProductForm.stock),
      tags: addProductForm.tags.split(',').map(tag => tag.trim()).filter(tag => tag),
      shipAddress: addProductForm.shipAddress
    }
    
    console.log('发送添加商品请求:', productData)
    
    // 调用API添加商品
    const response = await productAPI.createProduct(productData)
    
    console.log('添加商品响应:', response)
    
    if (response && response.code === 200) {
      Message.success('商品添加成功！')
      // 关闭对话框
      addModalVisible.value = false
      // 刷新商品列表
      await loadProductData()
    } else {
      Message.error('商品添加失败：' + (response?.message || '未知错误'))
    }
  } catch (error) {
    console.error('添加商品失败:', error)
    Message.error('商品添加失败：' + (error.message || '网络错误，请稍后重试！'))
  }
}

// 页面挂载时调用API获取商品列表
onMounted(async () => {
  await loadProductData()
})
</script>

<style scoped>
/* 强制页面滚动 - 修复内容被遮挡问题 */
html {
  overflow-y: scroll; /* 改为普通声明，避免冲突 */
  scroll-behavior: smooth;
  height: 100%;
}

body {
  overflow-y: auto; /* 改为auto，让浏览器决定 */
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* 强制显示所有被遮挡的内容 */
* {
  box-sizing: border-box;
}

/* 确保Vue应用容器正确显示 */
#app {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* 确保路由视图容器正确显示 */
.router-view-container {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* 统一滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 5px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 横向滚动条 */
::-webkit-scrollbar-horizontal {
  height: 10px;
}

::-webkit-scrollbar-track-horizontal {
  background: #f1f1f1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb-horizontal {
  background: #c1c1c1;
  border-radius: 5px;
}

/* Firefox滚动条美化 */
* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
/* 确保操作列按钮正确显示 */
:deep(.arco-table-body td.cell-action) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 60px;
}

/* 确保Space组件内部元素正确排列 */
:deep(.arco-space) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 25px;
  background-color: #f5f5f5;
  border-radius: 12px;
  margin: 15px auto 10px;
  max-width: 90%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 90%;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-item {
  margin-bottom: 0;
}

.search-input {
  width: 500px;
  height: 45px;
  border-radius: 22px;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
  font-size: 16px;
  padding: 0 20px;
}

.search-input:hover,
.search-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.search-button-item {
  margin-bottom: 0;
}

.search-button {
  height: 45px;
  border-radius: 22px;
  padding: 0 32px;
  font-weight: 500;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  border: none;
  transition: all 0.3s ease;
  font-size: 16px;
}

.search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.add-product-container {
  display: flex;
  align-items: center;
}

.add-product-button-item {
  margin-bottom: 0;
}

.add-product-button {
  height: 45px;
  border-radius: 22px;
  padding: 0 32px;
  font-weight: 500;
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  border: none;
  transition: all 0.3s ease;
  font-size: 16px;
}

.add-product-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
}

/* 商品表格样式 - 修复显示问题 */
.product-table-container {
  margin: 20px auto;
  max-width: 90%;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* 确保内容不被裁剪 */
  height: auto;
  overflow: visible !important; /* 强制显示所有内容 */
  position: relative;
}



/* 分页样式 - 确保显示 */
.pagination-container {
  margin: 10px auto 20px;
  max-width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  position: relative !important; /* 确保不被遮挡 */
  visibility: visible !important; /* 强制可见 */
  opacity: 1 !important; /* 确保透明度 */
}

/* 分页按钮美化 */
.pagination-container :deep(.arco-pagination-item) {
  min-width: 36px;
  height: 36px;
  border-radius: 6px !important;
  margin: 0 4px;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}

.pagination-container :deep(.arco-pagination-item-active) {
  background-color: #1890ff;
  border-color: #1890ff;
  color: white;
}

.pagination-container :deep(.arco-pagination-item:hover:not(.arco-pagination-item-active)) {
  border-color: #1890ff;
  color: #1890ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

/* 上一页/下一页按钮美化 */
.pagination-container :deep(.arco-pagination-prev),
.pagination-container :deep(.arco-pagination-next) {
  min-width: 36px;
  height: 36px;
  border-radius: 6px !important;
  margin: 0 4px;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}

.pagination-container :deep(.arco-pagination-prev:hover:not(:disabled)),
.pagination-container :deep(.arco-pagination-next:hover:not(:disabled)) {
  border-color: #1890ff;
  color: #1890ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

/* 页面主容器样式 - 修复滚动和布局问题 */
.product-page-container {
  min-height: 100vh;
  height: auto;
  overflow: visible; /* 移除overflow限制，让内容自然流动 */
  padding-bottom: 40px;
  box-sizing: border-box;
  position: relative; /* 确保正常文档流 */
}

/* 输入框美化 */
.pagination-container :deep(.arco-input-group-compact .arco-input) {
  border-radius: 6px !important;
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

.pagination-container :deep(.arco-input-group-compact .arco-input:focus) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 每页数量选择器美化 */
.pagination-container :deep(.arco-select:not(.arco-select-single)) .arco-select-view {
  border-radius: 6px !important;
}

.pagination-container :deep(.arco-select-single:not(.arco-select-allow-clear)) .arco-select-view {
  border-radius: 6px !important;
}

.pagination-container :deep(.arco-select .arco-select-view:hover) {
  border-color: #1890ff;
}

.pagination-container :deep(.arco-select .arco-select-view.arco-select-focused) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.product-table {
  width: 100%;
}

/* 商品图片样式 */
.product-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
}

.product-image-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.no-image {
  color: #999;
  font-size: 14px;
}

/* 状态样式 */
.status-online {
  color: #52c41a;
  background-color: #f6ffed;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-offline {
  color: #faad14;
  background-color: #fffbe6;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>
